<template lang="html">
  <div id="search-wrap">
    <header class="search-header">
      <search-input placeholder="请输入小区/商圈" @submit="search" @input="getKeyWord"></search-input>
    </header>
    <main class="search-hot" v-if="hotWords.length > 0">
      <h3 class="hotSearch-title">热门搜索</h3>
      <div class="word-container">
        <p class="hot-word" v-for="word in hotWords" @click.stop="clickHotWord(word)">{{word}}</p>
      </div>
    </main>
  </div>
</template>

<script>
import SearchInput from './child/SearchInput'
export default {
  components: {
    SearchInput
  },
  data () {
    return {
      hotWords: [],
      keyword: ''
    }
  },
  methods: {
    getKeyWord (keyword = '') {
      this.keyword = keyword
    },
    search () {
      if (this.keyword !== '') {
        this.$router.replace({path: '/rentList', query: {communityName: this.keyword}})
      } else {
        this.$vux.toast.text('关键词不能为空')
      }
    },
    clickHotWord (word) {
      this.$router.replace({path: '/rentList', query: {communityName: word}})
    }
  },
  created () {
    this.$axiosGeting(this.$api.hotSearch).then(res => {
      if (res.code === '0000') {
        this.hotWords = res.data
      }
    })
  },
  beforeRouteLeave (to, from, next) {
    console.log(from)
    to.name === 'homeRenting' ? next('/rentList') : next()
  }
}
</script>

<style lang="less" scoped>
  @import "../../styles/baseVar.less";
  #search-wrap{
    min-height: 100vh;
    padding: 0 15px;
    background: #fff;
    box-sizing: border-box;
    .search-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding-top: 18px;
      height: 48px;
      box-sizing: border-box;
    }
    .search-hot{
      .hotSearch-title{
        height: 37px;
        line-height: 37px;
        font-size: 15px; /* 30/40 */
        color: #ff9600;
        box-sizing: border-box;
        font-weight: normal;
      }
      .word-container{
        display: flex;
        flex-wrap: wrap;
        padding: 15px; /* 30/40 */
        box-sizing: border-box;
      }
      .hot-word{
        padding: 5px 15px; /* 10/40 */ /* 30/40 */
        font-size: @font-size-12; /* 24/40 */
        color: @color-999999;
      }
    }
  }
</style>
